<!doctype html>
<html>
<head>
 <title>IE7 {CSS2: auto}</title>
 <!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="../trunk/lib/IE9.js"></script><![endif]-->
 <style>
  #box, #box2 {
   position: fixed;
   border: black 5px solid;
   background: url(horizontal-gauge.gif);
   left: 20em;
   right: 20px;
   top: 15px;
   height: 120px;
   margin: auto;
  }
  #relative {
  	position: relative;
	width: 600px;
	background-color: green;
	padding: 5px;
	color: white;
  }
 </style>
</head>
<body>
 <script src="ie7-demo.js"></script>
 <h2>right:</h2>
 <div id="box">I'm a very colorful bug!</div>
 <p>&lt;&nbsp;<a href="javascript:history.back()">back</a></p>
 <div id="relative"><div id="box2">This should be the only colored box on the screen. I should be positioned to the viewport, not the containing element.</div>relative positioned box</div>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>ghfh
</body>
</html>
